<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">用户id：</label>
                            <div class="col-sm-8">
                                <input id="userId" name="userId" class="form-control" type="text" value="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图书名称：</label>
                            <div class="col-sm-8">
                                <input id="bookName" name="bookName" class="form-control" type="text" maxlength="50"
                                       minlength="1" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图书图片：</label>
                            <div class="col-sm-8">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" style="width: 50%;" id="bookimgs">
                                        <i class="fa fa-cloud"></i>上传多张图书图片
                                    </button>
                                    <!--<button type="button" class="layui-btn" id="test2">多图片上传</button>-->
                                    <blockquote class="layui-elem-quote layui-quote-nm">
                                        预览图：
                                        <div class="layui-upload-list" id="imgspreview"></div>
                                    </blockquote>
                                    <p id="demoText"></p>
                                </div>
                                <input type="hidden" id="bookImg" name="bookImg" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">作者：</label>
                            <div class="col-sm-8">
                                <input id="author" name="author" class="form-control" type="text" minlength="1"
                                       maxlength="30" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">出版社：</label>
                            <div class="col-sm-8">
                                <input id="press" name="press" class="form-control" type="text" minlength="4"
                                       maxlength="30" required="required">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">分类：</label>
                            <div class="col-sm-8" >
                                <select  class="form-control" id="catId" name="catId">
                                    <option value="">请选择分类</option>
                                    <option th:each="category : ${categoryDOList}" th:text="${category.catName}" th:value="${category.catId}" ></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">漂流规则：</label>
                            <div class="col-sm-8">
                                <input id="redundance1" name="redundance1" class="form-control" type="text"
                                       maxlength="100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">推荐：</label>
                            <div class="col-sm-8">
                                <!--<input id="isRecommend" name="isRecommend" class="form-control" type="text">-->
                                <label class="radio-inline">
                                    <input
                                            type="radio" name="isRecommend" value="1" class="" checked/>
                                    推荐
                                </label>
                                <label class="radio-inline">
                                    <input
                                            name="isRecommend" value="0" class="" type="radio"/>
                                    不推荐
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">最新：</label>
                            <div class="col-sm-8">
                                <!--<input id="isNewest" name="isNewest" class="form-control" type="radio">-->
                                <label class="radio-inline">
                                    <input
                                            type="radio" name="isNewest" value="1" class="" checked/>
                                    最新
                                </label>
                                <label class="radio-inline">
                                    <input
                                            name="isNewest" value="0" class="" type="radio"/>
                                    陈旧
                                </label>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="col-sm-3 layui-form-label">图书简介：</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入图书简介" class="layui-textarea" id="appear" name="appear" minlength="10"></textarea>
                            </div>
                        </div>

                        <!--<div class="form-group">
                            <label class="col-sm-3 control-label">总数量：</label>
                            <div class="col-sm-8">
                                <input id="total" name="total" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">上传时间：</label>
                            <div class="col-sm-8">
                                <input id="upDate" name="upDate" class="form-control" type="text">
                            </div>
                        </div>-->
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/book/books/add.js"></script>
<!--<script src="/js/layui.js"></script>-->
<script src="/js/plugins/layer/layer.min.js"></script>
<script>
    layui.use('upload', function () {
        var upload = layui.upload
            , bookImg = ' ';
        //多图片上传
        upload.render({
            elem: '#bookimgs'
            , url: '/common/sysFile/upload'
            , multiple: true
            , accept: 'images'
            , size: 5120
            , number: 5
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#imgspreview').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" ' +
                        'style="max-height: 100px;max-height: 100px;margin: 3px 3px 1px 5px;border: solid 1px lightslategray">');
                });
            }
            , done: function (res) {
                //上传完毕
//                alert(res.fileName);
                bookImg += res.fileName + ",";
                $('#bookImg').val(bookImg);
                console.log(bookImg);

                layer.msg("successful!");
            }
            , error: function () {
                //请求异常回调
                layer.msg("please try again!");
            }
        });
    });
</script>

</body>
</html>
